<template>
  <div class="crm-left-menu">
    <div class="fixed-menu full-height limit-width">
      <div class="logo-item">
        <i class="logo-h1"><img :src="logo" /></i>
      </div>
      <div class="lsb-menu full-height clearfix limit-width">
        <el-menu :router="routerMode"
                 :default-active="left_menu_index"
                 :default-openeds="defaultOpeneds"
                 class="menu-list"
                 @open="handleOpen"
                 @close="handleClose">
          <el-submenu index="gonghai">
            <div slot="title"
                 class="pd-diff">
              <icon name="gear"></icon>
              <span class="menu-link">家校共育</span>
            </div>
          </el-submenu>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
$limit-width: 226px;

.crm-left-menu {
  width: 200px;
  max-width: $limit-width;
  float: left;
  position: relative;
  user-select: none;
  height: 100%;
  // text-align: center;

  .limit-width {
    max-width: $limit-width;
  }

  .menu-link {
    display: inline-block;
    width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.el-submenu__title {
  padding: 0 !important;
}

.pd-diff {
  color: #48576a;
}

.crm-left-menu {
  .pd-diff {
    padding-left: 20px;
  }

  .lsb-menu {
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    .menu-list {
      padding-bottom: 70px;
    }
  }

  .el-submenu {
    overflow: hidden;
    .el-menu-item .pd-diff {
      padding-left: 38px;
    }
  }

  .el-submenu__title {
    .pd-diff > * {
      vertical-align: middle;
    }
  }

  .menu-link {
    padding-left: 4px;
  }

  .el-menu {
    width: 100%;
  }

  .is-active > .pd-diff {
    position: relative;
    background-color: #f9fafd;
    display: block;
  }

  $menu-active-color: #e7edfd;
  .el-submenu.is-opened {
    border-left: 0;
    & * {
      // color: white;
    }

    .el-menu-item,
    .pd-diff {
    }
  }

  .el-menu-item {
    padding-right: 0 !important;
    padding-left: 0px !important;

    &.is-active > .pd-diff {
      background-color: #20a0ff;
      color: white;
    }

    // &.is-active::before {
    //   background-color: #f9fafd;
    //   content: "";
    //   display:block;
    //   width: 2px;
    //   background-color: #20a0ff;
    //   height: 100%;
    //   position: absolute;
    //   z-index: 2;
    // }

    &.is-active {
    }
  }
}

.menu-link {
  color: inherit;
}

.crm-left-menu .el-menu,
.crm-left-menu .el-submenu .el-menu {
  background-color: #f4f6fb;
}

.fixed-menu.full-height {
  position: fixed;
  width: inherit;
  z-index: 12;
  background: #f4f6fb;
}

.crm-left-menu > .el-menu {
  background-color: rgb(251, 252, 255);
}

.crm-left-menu > .el-menu > .el-submenu > .el-menu {
  background-color: rgb(244, 246, 251);
}

.logo-item {
  background-color: #f4f6fb;
}

.logo-h1 {
  display: block;
  padding: 13px 0;

  img {
    height: 30px;
    display: block;
    margin: 0 auto;
  }
}

.logo-link {
  overflow: hidden;
  margin-top: 16px;

  img {
    width: 108px;
    display: block;
  }
}
</style>
<script>
import { MenuItem, MenuItemGroup, Col, Menu, Submenu, Row } from 'element-ui'
import Config from '../config/common'
import { mapState } from 'vuex'
import Icon from 'vue-awesome/components/Icon.vue'

import 'vue-awesome/icons/search-minus'
import 'vue-awesome/icons/cny'
import 'vue-awesome/icons/gear'
import 'vue-awesome/icons/envelope'
import 'vue-awesome/icons/th-large'
import 'vue-awesome/icons/edit'
import 'vue-awesome/icons/list'
import 'vue-awesome/icons/th-list'
import 'vue-awesome/icons/phone'
export default {
  data () {
    return {
      routerMode: true,
      defaultOpeneds: [
        'gonghai',
        'distributeList',
        'ananlyze',
        'stat'
        // 'gonghai-normal',
        // 'gonghai-social'
      ],
      logo: Config.IMG_HOST + '/crm-logo-only.png?2'
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  },

  computed: {
    ...mapState({
      'left_menu_index': state => state.menu.left_menu_index,
      'user': state => state.auth.user,
      'isManager': state => state.auth.user
        && (state.auth.user.is_team_manager ||
          state.auth.user.is_manager)
    })

  },

  components: {
    'el-menu-item': MenuItem,
    'el-menu-item-group': MenuItemGroup,
    'el-col': Col,
    'el-menu': Menu,
    'el-submenu': Submenu,
    'el-row': Row,
    'icon': Icon
  },

  mounted () {
    this.$emit('sideBarLoaded')
  }
}
</script>
